<template>
	<view>
		<uni-nav-bar fixed="true" @clickLeft="back" @clickRight="search" backgroundColor="#6869a8" height="120rpx"
			color="white" statusBar="true">
			<view style="font-size: 37rpx; margin: auto;">
				<text>新朋友</text>
			</view>
			<view slot="left">
				<uni-icons type="back" size="30" color="white"></uni-icons>
			</view>
			<view slot="right">
				<text style="font-size: 35rpx;">添加</text>
			</view>
		</uni-nav-bar>
		<uni-list>
			<uni-list-item v-for="(item,index) in friendRequest" :key="index">
				<template v-slot:header>
					<view>
						<image @click="watchFriend(users[index].id)" :src="users[index].avatar" mode="aspectFill"
							style="width: 80rpx;height: 80rpx;border-radius: 15rpx;"></image>
					</view>
					<view>
						<text class="username">{{users[index].username}}</text>
						<br />
						<text class="message">{{item.message}}</text>
					</view>
				</template>
				<template v-slot:footer>
					<view v-if="item.toId == myId" class="hint">
						<view class="button-accept" @click="accept(item,index)" hover-class="button-accept-click">同意
						</view>
						<view class="button-refuse" @click="reject(item,index)" hover-class="button-refuse-click">拒绝
						</view>
					</view>
					<view v-if="item.fromId == myId" class="hint">
						<view>等待对方同意</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<view class="tip" v-if="friendRequest.length==0">
			没有新的好友通知~~
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				friendRequest: [],
				users: [],
				myId: this.$store.state.userInfo.id
			};
		},
		computed: {},
		mounted() {
			this.$request.TokenRequest({
				url: "/friend/getUnDealRequest"
			}, {}).then(res => {
				if (res.state === 200) {
					this.friendRequest = res.data.friendRequest
					this.users = res.data.users
				}
			})
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			search() {
				uni.navigateTo({
					url: '../search/search'
				})
			},
			watchFriend(id) {
				uni.navigateTo({
					url: "../informationPage/informationPage?id=" + id
				})
			},
			accept(item, index) {
				console.log('accept')
				this.$request.TokenRequest({
					url: '/friend/accept'
				}, item).then(res => {
					uni.showToast({
						title: "已通过",
						icon: 'none'
					})
					this.users.splice(index, 1)
					this.friendRequest.splice(index, 1)
					this.$store.commit("subFriendRequestNum")
					let msg = {
						fromId: this.myId,
						toId: this.myId === item.fromId ? item.toId : item.fromId,
						messageType: 1,
						data: "我们已经是好友了,现在开始聊天吧。"
					}
					this.$socket.send(msg)
				})
			},
			reject(item, index) {
				console.log('reject')
				// console.log(item)
				this.$request.TokenRequest({
					url: "/friend/reject"
				}, {
					addFriendId: item.id
				}).then(res => {
					this.$store.commit("subFriendRequestNum")
					this.users.splice(index, 1)
					this.friendRequest.splice(index, 1)
					uni.showToast({
						title: "已拒绝",
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.username {
		display: inline-block;
		margin: auto 15rpx;
		font-size: 35rpx;
		max-width: 240rpx;
		overflow-y: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.id {
		font-size: 30rpx;
		color: #858786;
	}

	.message {
		margin: auto 15rpx;
		font-size: 27rpx;
		color: #858786;
	}

	.hint {
		margin: auto 0;
		font-size: 30rpx;
		color: #858786;
		display: flex;
	}

	.button-accept {
		color: white;
		background-color: #8b8de1;
		font-size: 30rpx;
		margin: 0 10rpx;
		padding: 8rpx 23rpx;
		border: #8b8de1 2rpx solid;
		border-radius: 10rpx;
	}

	.button-refuse {
		color: #000000;
		font-size: 30rpx;
		margin: 0 10rpx;
		padding: 8rpx 23rpx;
		border: #aaaaaa 2rpx solid;
		border-radius: 10rpx;
	}

	.button-accept-click {
		background-color: #6869a8;
	}

	.button-refuse-click {
		background-color: #F5F5F5;
	}

	.tip {
		font-size: 30rpx;
		color: #858786;
		text-align: center;
		padding: 40rpx 0;
	}
</style>
